<template>
  <div class="account-trad">
    <div class="tab">
      <el-tabs :value="accountTabValue" @tab-click="tabClick">
            <el-tab-pane label="全部账号" name="first" :lazy="true">
              <AllAcount v-if="tabIndex === '0'" />
            </el-tab-pane>
            <el-tab-pane :label="`王者待审核「${count && count.wzAuditCount}」`" :lazy="true">
              <WzReviewedAccount @updateCount="getCount" v-if="tabIndex === '1'" />
            </el-tab-pane>
            <el-tab-pane :label="`吃鸡待审核「${count && count.peaceAuditCount}」`" :lazy="true">
              <CjReviewedAccount @updateCount="getCount" v-if="tabIndex === '2'" />
            </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>
<script>

import AllAcount from './components/allAccount'
import CjReviewedAccount from './components/cjReviewedAccount'
import WzReviewedAccount from './components/wzReviewedAccount'
export default {
  components: {
    AllAcount,
    WzReviewedAccount,
    CjReviewedAccount
  },
  data () {
    return {
      accountTabValue: 'first',
      tabIndex: '0',
      count: null
    }
  },
  created() {
    this.getCount()
  },
  mounted () {
  },
  methods: {
    tabClick(e) {
      this.tabIndex = e.index
    },
    async getCount() {
      let res = await this.$http.get(`/trade/getAuditCount`, {
      })
      if (res.code === '0') {
        this.count = res.data
      } else {
          this.$message({
              type: 'error',
              message: res.desc
          })
      }
      console.log(res, 'res')
    },
  }
}
</script>
<style lang="scss" scoped>
</style>
